<!--
  文件描述：无缝滚动组件
-->
<template>
  <div class="my_scroll">
    <div class="my_scroll_page" style="">
      <vue-seamless-scroll :data="viewList" :class-option="defaultOption">
        <div class="scroll_item">
          <div
            v-for="item in viewList"
            @click="toDetails(item.imgid)"
            :key="item.imgid"
          >
            <p>{{ item.productid }}</p>
            <span>{{ item.view_time }}</span>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  props: ["toDetails", "viewList"],
  name: "MyScroll",
  components: {
    vueSeamlessScroll,
  },
  data() {
    // 这里存放数据
    return {
      listData: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  // 方法集合
  methods: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    for (let i = 0; i < 15; i++) {
      let j = {
        title: "卫征同志现任国防科工局重大专项工程中心" + i,
        time: "2020/4/10",
      };
      this.listData.push(j);
    }
  },
};
</script>

<style scoped lang="scss">
.my_scroll {
  .my_scroll_page {
    height: 200px;
    overflow: hidden;
    .scroll_item {
      font-size: 14px;
      color: #baffe5;
      line-height: 24px;

      // justify-content: space-between;
      > div {
        display: flex;
        cursor: pointer;
        &:hover {
          padding: 4px 0;
        }
      }
      p {
        width: calc(100% - 150px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        margin-left: 10px;
        width: 160px;
        color: #baffe533;
      }
    }
  }
}
</style>
